<!doctype html>
<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false"%>
<head>
    <title>${registrationNO}-视频监控</title>
    <%@ include file="videoHead.jsp"%>
</head>
<body  onUnload="exitstopplay()" >
<div class="" style="height:100%;">
	<div style="width:60%;height:100%;float: left;padding-right:5px;border-right:1px solid #dedede;background: url(${appCtx}resources/images/video/bg.jpg) #ededed no-repeat 50% 0;">
		<object classid="clsid:92A85542-C1C4-4B79-A242-B3B3BA5AED72" width="100%" height="100%" name="showvideo" codebase="MMVideo.cab" id="sdObj">
			<a class="videoBtn" href="${ocxPath}OcxSD32.exe" id="downloadVideoControl">下载视频控件</a>
		</object>
	</div>
	<div class="" style="width:40%;height:100%;float: left;margin-left:0px;padding-left: 5px;border-right: 1px solid #eee;">
		<div id="gdMap"  style="height:60%;width:100%"></div>
		<div id="speedDiv" style="height:40%;width:100%" >
			<div id="speedCharts" style="width:100%;height: 100%;"></div>
		</div>
		<div id="tooldiv" style="position: absolute;z-index: 300;right: 40px;top:10px;">
		
		<select class="videoSelect" style="width:130px;margin: 0px;" id="timeOutSel">
		<option value ="300" selected="selected">5分钟后关闭</option>
  		<option value ="600">10分钟后关闭</option>
  		<option value="1200">20分钟后关闭</option>
  		<option value="1800">30分钟后关闭</option>
  		</select>
  		<div class="timeEnd">
  			<span id="t_m">00分</span> 
			<span id="t_s">00秒</span>
  		</div>
		<a class="videoBtn" href="javascript:;" id="closeVideoDiv" >关闭视频</a>
		<a class="dirverBtn fl" href="javascript:;" id="queryDriverDiv" style='margin-top:1px;padding:0 3px' >司机信息</a>
		<select class="videoSelect" id="selectVehicleSel" onchange="changeVechile()"  style="width:100px;margin: 0px;">
		</select>
		<div id="driverInfo" class="text" style="display: none; position:absolute;z-index:200;top: 0px;left:0; transform-origin: 106px 101.5px 0px;background:white;width:100%;height:100%">
	</div>
	</div>
	
</div>

<!-- 用于控制弹出窗口- -->
<a id="txtOpenWindow" target="_self" style="display: none"></a>
<script>
	


queryDriverInfo();
var oneDay = 10 * 1000;
var date = [];

var TEXT="${TEXT}";
var vehicleColor="${vehicle_color}";
var data = [];
var now = new Date();
var nowstr="";

var intsetInterval=0;

var  appCtx="${appCtx}";
var defaultTime =60;
var vehicleID ="${vehicleID}";
var vehicleNO ="${vehicleNO}";
var commno ="${commno}";
var regNO ="${registrationNO}";
var RegistrationNO ='${RegistrationNO}';
var internal_number ="${internal_number}";
var fileVersion = "1.0.1.0";//当前版本号
var TransmitIP='${TransmitIP}';
var TransmitPort ='${TransmitPort}';
var ID ='${ID}';
var ChannelNum = ${ChannelNum !=null?ChannelNum:4};//显示视频窗口数，默认打开4个
var playerH264;

var isinitselect = true;
var intsetIntervalSub=0;
var curgpstime="";
var curaddress="";
var trackArray=new Array();
var infoWindow;
var isopenWin=false;
var isMineOp=false;
var marker;
var map ;
var myChart;

var option = {
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: date
	    },
	    tooltip: {
	        trigger: 'axis',
	        formatter: function (params) {
	            params = params[0];
	            return "时间:"+params.name+"<br/>"+"速度:"+params.value;
	        },
	        axisPointer: {
	            animation: false
	        }
	    },
	    yAxis: {
	        boundaryGap: [0, '50%'],
	        name : '速度(km/h)',
		    type : 'value',
		    max : 150,
	    },
	    series: [
	        {
	            name:'速度',
	            type:'line',
	            smooth:true,
	            symbol: 'none',
	            stack: 'a',
	            data: data
	        }
	    ]
	};
	
$(function(){ 
	Load();
}); 

function Load() {
	try{
		map = new AMap.Map('gdMap', {
		    resizeEnable: true,
		    zoom:11,
		    center: [106.397428, 26.90923]
		});
		

		
		myChart = echarts.init(document.getElementById('speedCharts'));
		myChart.setOption(option);
		updatemyChart();
			

			
			
		 var t=setTimeout(initVehicleList(),1000);
		 subScribeVehicle();
		 intsetIntervalSub=window.setInterval("subScribeVehicle();", 10000);
		 defaultTime =$("#timeOutSel").val();
		 $("#closeVideoDiv").unbind("click");
		 $("#closeVideoDiv").bind("click",buttonCloseVideo);
		 $("#closeVideoDiv").html("关闭视频")
		 setTimeout("initVideo()", 3000 ); 
		 playerH264 = document.getElementById("sdObj"); 
		 playerH264.IOcxSetWin(ChannelNum);
		
	}catch(e){
		
	}
	try {
		var agent = navigator.userAgent.toLowerCase();
		if(agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0){
			document.getElementById("downloadVideoControl").href="${ocxPath}OcxSD64.exe";
			}else{
			document.getElementById("downloadVideoControl").href="${ocxPath}OcxSD32.exe";
		}
	}catch(e){
		
	}
}

function updatemyChart() {
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'速度',
            data: data
        }]
    });
}

function initVehicleList(){
	

	$('#selectVehicleSel').html("<option value='"+vehicleID+"' selected='selected'>"+TEXT+"</option>");
	$('#selectVehicleSel').attr("disabled","disabled");
/* 	
	$.ajax({
		type : 'post',
		async : false,
		url : appCtx + "/video/queryVideoVehicleList.html",
		cache : false,
		dataType : "JSON",
		success : function(data) {
			if(data){

				$('#selectVehicleSel').select2({
				  data: data
				})
				
				$('#selectVehicleSel').val(vehicleID).trigger("change");
			}
		}
	}); */

}


//查询司机信息
function queryDriverInfo(){
	$("#queryDriverDiv").click(function(){
		$.ajax({
			type : 'post',
			async : true,
			data :{"vehicle_no_color": TEXT + "_" + vehicleColor},
			url : appCtx + "/video/queryDriverInfomation.html",
			cache : false,
			dataType : "JSON",
			success : function(data) {
				if(data){
					//时间处理
					var driveTotalTime=data.totalDriverTime;
					var days    = driveTotalTime / 1000 / 60 / 60 / 24;
					var daysRound   = Math.floor(days);
					var hours    = driveTotalTime/ 1000 / 60 / 60 - (24 * daysRound);
					var hoursRound   = Math.floor(hours);
					var minutes   = driveTotalTime / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
					var minutesRound  = Math.floor(minutes);
					var isTired =data.tired==0?"否":"是";
					var img=data.imgUrl==null?"暂无照片":data.imgUrl;
					var jsonStr ="<p style='text-align:left'><span style='font-family:'微软雅黑', '微软雅黑''>当前司机：" + data.driverName + "</span></p>"+
		              "<p><span style='font-family:'微软雅黑', '微软雅黑''>总驾驶时长：" + hoursRound +"小时"+ minutesRound +"分钟" + "</span></p>"+
		              "<p><span style='font-family:'微软雅黑', '微软雅黑''>是否疲劳驾驶：" + isTired + "</span></p>"+
		              "<p><span style='font-family:'微软雅黑', '微软雅黑''>驾驶期间最高时速：" + data.max_speed + "km/h</span></p>"+
		              "<p><span style='font-family:'微软雅黑', '微软雅黑''>驾驶期间超速次数：" + data.overspeed_count + "次</span></p>"+
		              "<img src=" + img + ">";
					$('#driverInfo').html(jsonStr);  
				}
			}
		});
	})
}


var isClick = false;
$('#queryDriverDiv').click(function(){
    if (!isClick) {
        $('#driverInfo').fadeIn();
        isClick = true;
    }else{
        $('#driverInfo').fadeOut();
        isClick = false;
    }
});



function getVehicleStatusPicUrl(head,status){
    var carStatus = ['car','car','carYellow','red','gray'];
    var picUrl = appCtx + "resources/images/mapTool/";
    try{
        picUrl += (carStatus[status])+getHead(head)+".png";
        return picUrl;
    }catch(ex){
        console.log(ex);
        return picUrl  = appCtx + "resources/images/mapTool/car1.png";  //出错的话 默认车辆图标
    }
}

function getHead(head){
    var head=head;
    if ((head >= 0 && head < 22) || (head >= 336)){
        return 3;
    }else if (head >=22 && head <66){
        return 7;
    }else if (head >=66 && head <112){
        return 1;
    }else if (head >=112 && head <=156){
        return 8;
    }else if (head >=156 && head <202){
        return 4;
    }else if (head >=202 && head <= 246){
        return 5;
    }else if (head >=246 && head <292){
        return 2;
    }else if (head >=292 && head <336){
        return 6;
    }
}

/**
* 删除所有覆盖物
* 
*/
function clearAllMarker(){
	map.clearMap(); 
}

function closeInfoWin(){
	if(isMineOp){
		isopenWin=false;
	}
	
}

function subScribeVehicle(){
	var getTimestamp=new Date().getTime();
	$.ajax({
        url : appCtx+'gis/monitor/subScribe.html?v='+getTimestamp,
        data :{"vehicle_no_color": TEXT + "_" + vehicleColor},
        success : function(datar){

       	 if(datar&&datar.length>0){
       		 
       	 
       	 var result = JSON.parse(datar);
        	 if(result.data.length>0){
        		if(curgpstime!=result.data[0].gpsTimeS){
          		 var arrgps=[];
          		 arrgps.push(result.data[0].longitude);
          		 arrgps.push(result.data[0].latitude);
          		 isMineOp=false;
          		 clearAllMarker();
          		 isMineOp=true;
          		 var picUrl = getVehicleStatusPicUrl(result.data[0].head,result.data[0].carStatus);
          		 infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)}); 
          		infoWindow.on('close', closeInfoWin);
          			marker = new AMap.Marker({
          		        map:map,
          		        position: [result.data[0].longitude, result.data[0].latitude],
          		        icon: picUrl,
          		        offset: new AMap.Pixel(-15, -10)
          		    });
          			marker.content = '车牌号：'+TEXT + result.data[0].gpsTimeS+'</br>速度：'+result.data[0].gpsSpeedF+' 公里/小时</br>里程：'+result.data[0].gpsMileage+' 公里</br>状态：'+result.data[0].status;
          			marker.on('click', function(e){
          				 isopenWin=true;
          				 infoWindow.setContent(e.target.content);
          			     infoWindow.open(map, e.target.getPosition());
          			     
          			   	 
          			});
          			if(isopenWin){
          				infoWindow.setContent(marker.content);
          				infoWindow.open(map,marker.getPosition());
          			}
          			
          		 trackArray.push(arrgps);
          		 

          	 
          		 if(trackArray.length>1){
          			 	var polyline = new AMap.Polyline({
          			        path: trackArray,          //设置线覆盖物路径
          			        strokeColor: "#3366FF", //线颜色
          			        strokeOpacity: 1,       //线透明度
          			        strokeWeight: 5,        //线宽
          			        strokeStyle: "solid",   //线样式
          			        strokeDasharray: [10, 5] //补充线样式
          			    });
          			    polyline.setMap(map);
          		 }
          		 map.setCenter(new AMap.LngLat(result.data[0].longitude, result.data[0].latitude))
          		 
          		 curgpstime=result.data[0].gpsTimeS;
          		 date.push(result.data[0].gpsTimeS.substring(11,19));
              	 data.push(result.data[0].gpsSpeedF);
              	 updatemyChart();
          	 }
        	 }

        }
        }
    });
	

}



//在指定位置打开信息窗体
function openInfo() {
    infoWindow.open(map, map.getCenter());
}

function initVideo(){
	try{
		playerH264.IOcxSetWin(ChannelNum);
		playerH264.NetSet3GServer(TransmitIP, TransmitPort);
		//playerH264.NetSet3GServer(TransmitIP, TransmitPort);
		playerH264.DevAddDevice(0, 0, ChannelNum, ID, RegistrationNO, TransmitIP, TransmitPort);
		// playerH264.IOpenVideo(13287310043,1); 
		playerH264.IOpenVideoEx(ID, 0xff);
		intsetInterval=window.setInterval("timeOut();", 1000);
	}catch(e){
		
	}
	    
}


function timeOut(){
	if(defaultTime>0){
		defaultTime--;
		var m=Math.floor(defaultTime/60%60); 
		var s=Math.floor(defaultTime%60);
		if(m<10){
			document.getElementById("t_m").innerHTML = "0"+m + "分"; 
		}else{
			document.getElementById("t_m").innerHTML = m + "分"; 
		}
		if(s<10){
			document.getElementById("t_s").innerHTML = "0"+s + "秒";
		}else{
			document.getElementById("t_s").innerHTML = s + "秒";
		}
	}else{
		document.getElementById("t_m").innerHTML = "00" + "分";
		document.getElementById("t_s").innerHTML = "00" + "秒";
		window.clearInterval(intsetInterval);
		playerH264.IStopVideoEx(ID, 0xff); 
		$("#closeVideoDiv").unbind("click");
		$("#closeVideoDiv").bind("click",buttonOpenVideo);
		$("#closeVideoDiv").html("打开视频")
	}
}

function buttonOpenVideo(){
	 defaultTime =$("#timeOutSel").val();
	 	try{
	 		playerH264.IOpenVideoEx(ID, 0xff);
		}catch(e){
			
		}
	 
	 intsetInterval=window.setInterval("timeOut();", 1000);
	 $("#closeVideoDiv").unbind("click");
	 $("#closeVideoDiv").bind("click",buttonCloseVideo);
	 $("#closeVideoDiv").html("关闭视频")
}
function buttonCloseVideo(){
	defaultTime=0;
	document.getElementById("t_m").innerHTML = "00" + "分";
	document.getElementById("t_s").innerHTML = "00" + "秒";
	window.clearInterval(intsetInterval);
	try{
		playerH264.IStopVideoEx(ID, 0xff); 
	}catch(e){
		
	}
	
	$("#closeVideoDiv").unbind("click");
	$("#closeVideoDiv").bind("click",buttonOpenVideo);
	$("#closeVideoDiv").html("打开视频")
}

function exitstopplay(){
	try{
		playerH264.IStopVideoEx(ID, 0xff); 
	}catch(e){
		
	}
	
}
/* var defaultTime = videoOverTime;
function timeOut(){
	if(defaultTime>0){
		defaultTime--;
		$("#time_label").html(defaultTime+'秒后自动关闭视频');
	}else{
		playerH264.IStopVideoEx(ID, 0xff);
		$("#resetTimeout").show();
		$("#time_label").hide();
	}
}
function setTimeOut(){
	playerH264.IOpenVideoEx(ID, 0xff);
	$("#resetTimeout").hide();
	$("#time_label").show();
	defaultTime = videoOverTime;
}
 */




function addData(shift) {
    var hourstr=now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
    var minutestr=now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    var secondstr=now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    nowstr = [hourstr, minutestr, secondstr].join(':');
    date.push(nowstr);
    data.push(parseFloat(Math.random() * 30+50).toFixed(1));

    if (shift) {
        date.shift();
        data.shift();
    }

    now = new Date(+new Date(now) + oneDay);
}



//打开新窗体
function openWindow(url){
	var openLink = $("#txtOpenWindow");
	openLink.attr('href', url);
	openLink[0].click();
}

function changeVechile(){
	if(isinitselect){
		isinitselect=false;
	}else{
		if($("#closeVideoDiv").html()=="关闭视频"){
			alert("需要关闭当前正在播放的视频才能进行切换！");
			isinitselect=true;
			$('#selectVehicleSel').val(vehicleID).trigger("change");
		}else{
			try{
				exitstopplay();
			}catch(e){
				
			}
			
			var vid=$("#selectVehicleSel").val();
			openWindow(appCtx + "/video/videoMonitor.html?vehicleID="+vid);
		}
		
	}
}


</script>
</body>
</html>
